<template>
  <div class="studio-apps">
    <div class="studio-header">
      <LeeTabs />
      <LeeSearch />
    </div>
    <div class="studio-content">
      <LeeAppsCard type="studio" :cardAddBtn="options" :cardList="apps" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import LeeTabs from "@/components/Lee-Tabs/index.vue";
import LeeSearch from "@/components/Lee-Search/index.vue";
import LeeAppsCard from "@/components/Lee-Apps-Card/index.vue";
import { NormalMenuInfo } from "@/types/menu";

onMounted(() => {
  console.log("StudioApps page mounted");
});

const options = reactive({
  name: "创建应用",
  type: "option",
  options: [
    {
      icon: "iconaddCircle",
      name: "创建空白应用",
      fn: () => {},
    },
    {
      icon: "iconfankui1",
      name: "从应用模版创建",
      fn: () => {},
    },
    {
      icon: "icondanganheji",
      name: "导入DSL文件",
      fn: () => {},
    },
  ],
});
const apps = ref<NormalMenuInfo[]>([
  {
    title: "智能客服助手",
    author: "小李同学",
    description:
      "基于大语言模型的智能客服系统，支持多轮对话、上下文理解、情感分析等功能。",
    createtime: "2025-10-31",
    route: "studioApps/workflow",
    menus: [
      { name: "编排", path: "/studio", icon: "iconbook" },
      { name: "访问API", path: "/api", icon: "iconbook" },
      { name: "日志与标注", path: "/log", icon: "iconbook" },
      { name: "监测", path: "/monitor", icon: "iconbook" },
    ],
  },
]);
</script>

<style lang="scss" scoped>
@use "@/assets/css/lee.scss" as lee;

.studio-apps {
  .studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 16px 48px 8px 48px;
    box-sizing: border-box;
  }
  .studio-content {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
</style>
